<template>
  <div>
    <div class="top-text">我们相爱已经{{day}}天啦~</div>
    <div class="container">
      <div class="mobie heart heart-beat">
        <div class="heart heart-shadow"></div>
      </div>
    </div>
    <div class="bottom-text">
      <div class="name">
        <i class="iconfont icon-boy"></i>
        {{boy}}
      </div>
      <i class="iconfont icon-love"></i>
      <div class="name">
        <i class="iconfont icon-girl"></i>
        {{girl}}
      </div>
    </div>
    <div class="bottom-text">
      页面访问量为{{viewCount}}次，已收到{{goodCount}}次祝福
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "@/fonts/iconfont.css";
import "@/css/heart.css";
import "@/js/utils/snow";

export default {
  name: "Home",
  metaInfo() {
    return {
      title: this.title
    };
  },
  data() {
    return {
      boy: null,
      girl: null,
      time: "2022-02-01 00:00:00",
      nameDto:null,
      viewCount:null,
      goodCount:null,
      day:null

    };
  },
  computed: {

  },
  methods:{
    view(viewid){
      this.$http.get("/count/view/"+viewid).then(
        (resp)=>{
          console.log(resp);
        }
      )
    },
    getName(){
      this.$http.get("/count/getName").then(
        (resp)=>{
          console.log(resp);
          this.boy =resp.data.data.name1;
          this.girl = resp.data.data.name2;
        }
      )
    },
    getViewCount(){
      this.$http.get("/count/getcount/1").then(
        (resp)=>{
          console.log(resp);
          this.viewCount = resp.data.data.num;
        }
      )
    },
    getGoodCount(){
      this.$http.get("/count/getcount/2").then(
        (resp)=>{
          console.log(resp);

          this.goodCount = resp.data.data.num;
        }
      )
    },
    getDay(){
      this.$http.get("/count/getDayNum").then(
        (resp)=>{
          console.log(resp);

          this.day = resp.data.data;
        }
      )
    }
  },
  created() {
    this.view(1);
    this.getName();
    this.getViewCount();
    this.getGoodCount();
    this.getDay();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
